<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书管理系统</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="js/config.js"></script>
    <script src="js/books.js"></script>
</head>
<body>
    <div class="container">
        <header>
            <h1>图书管理系统</h1>
            <div class="user-info">
                欢迎，<span id="username"></span>
                <button id="logout-btn">退出登录</button>
            </div>
        </header>
        
        <main>
            <div class="toolbar">
                <div class="search-box">
                    <input type="text" id="books-search" placeholder="搜索图书...">
                    <button id="books-search-btn">搜索</button>
                </div>
                <button id="new-book-btn">新建图书</button>
            </div>
            
            <div id="books-list" class="books-list">
                <!-- 图书列表将通过 JavaScript 动态加载 -->
            </div>
        </main>
    </div>
    
    <!-- 图书编辑模态框 -->
    <div id="book-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2 id="modal-title">新建图书</h2>
                <span class="close">&times;</span>
            </div>
            <form id="book-form">
                <input type="hidden" id="book-id">
                <div class="form-group">
                    <label for="book-title">标题</label>
                    <input type="text" id="book-title" required>
                </div>
                <div class="form-group">
                    <label for="book-author">作者</label>
                    <input type="text" id="book-author" required>
                </div>
                <div class="form-group">
                    <label for="book-isbn">ISBN</label>
                    <input type="text" id="book-isbn" required>
                </div>
                <div class="form-group">
                    <label for="book-description">描述</label>
                    <textarea id="book-description"></textarea>
                </div>
                <div class="form-group">
                    <label for="book-quantity">数量</label>
                    <input type="number" id="book-quantity" min="0" required>
                </div>
                <div class="form-actions">
                    <button type="submit">保存</button>
                    <button type="button" id="cancel-btn">取消</button>
                </div>
            </form>
        </div>
    </div>
    
    <!-- 图书查看模态框 -->
    <div id="view-book-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2 id="view-book-title"></h2>
                <span class="close">&times;</span>
            </div>
            <div class="book-details">
                <p><strong>作者：</strong><span id="view-book-author"></span></p>
                <p><strong>ISBN：</strong><span id="view-book-isbn"></span></p>
                <p><strong>描述：</strong><span id="view-book-description"></span></p>
                <p><strong>库存：</strong><span id="view-book-quantity"></span></p>
            </div>
            <div id="view-book-actions" class="form-actions">
                <button id="edit-book-btn">编辑</button>
                <button id="delete-book-btn">删除</button>
            </div>
        </div>
    </div>
</body>
</html> 